(function () {
  let myChart = echarts.init(document.querySelector('.sales .line'));
  //   let data = {
  //     year: [
  //       [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
  //       [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
  //     ],
  //     quarter: [
  //       [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
  //       [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34],
  //     ],
  //     month: [
  //       [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
  //       [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
  //     ],
  //     week: [
  //       [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
  //       [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24],
  //     ],
  //   };
  //   let option = {
  //     color: ['#00f2f1', '#ed3f35'],
  //     tooltip: {
  //       trigger: 'axis',
  //     },
  //     legend: {
  //       data: ['预期销售额', '实际销售额'],
  //       textStyle: {
  //         // 图例上的文字颜色
  //         color: '#4c9bfd', // 浅蓝色
  //       },
  //       left: '25%', // 距离左侧25%
  //     },
  //     grid: {
  //       // 直角坐标系内绘图网格
  //       top: '20%',
  //       left: '3%',
  //       right: '4%',
  //       bottom: '3%',
  //       containLabel: true, // grid 区域是否包含坐标轴的刻度标签
  //       show: true,
  //       borderColor: '#012f4a',
  //     },
  //     xAxis: {
  //       type: 'category',
  //       boundaryGap: false,
  //       data: [
  //         '1月',
  //         '2月',
  //         '3月',
  //         '4月',
  //         '5月',
  //         '6月',
  //         '7月',
  //         '8月',
  //         '9月',
  //         '10月',
  //         '11月',
  //         '12月',
  //       ],
  //       axisTick: {
  //         // 去掉刻度
  //         show: false,
  //       },
  //       axisLabel: {
  //         // 文字颜色
  //         color: '#4c9bfd',
  //       },
  //       axisLine: {
  //         // xAxis轴-垂直线段
  //         lineStyle: {
  //           color: '#012f4a',
  //         },
  //       },
  //     },
  //     yAxis: {
  //       yAxis: {
  //         type: 'value',
  //         axisTick: {
  //           // 坐标轴刻度相关设置
  //           show: false, // 不显示坐标轴刻度
  //         },
  //         axisLabel: {
  //           // 文字颜色
  //           color: '#4c9bfd',
  //         },
  //         axisLine: {
  //           // y轴-垂直线段
  //           lineStyle: {
  //             color: '#012f4a',
  //           },
  //         },
  //         splitLine: {
  //           //  轴线相关设置
  //           lineStyle: {
  //             color: '#012f4a', // 坐标轴线(分割线)的颜色
  //           },
  //         },
  //       },
  //     },
  //     series: [
  //       {
  //         name: '预期销售额',
  //         type: 'line',
  //         smooth: true, // 是否平滑曲线显示。
  //         itemStyle: {
  //           color: '#00f2f1', // 线颜色
  //         },
  //         data: data.year[0],
  //       },
  //       {
  //         name: '实际销售额',
  //         type: 'line',
  //         smooth: true,
  //         itemStyle: {
  //           color: '#ed3f35', // 线颜色
  //         },
  //         data: data.year[1],
  //       },
  //     ],
  //   };
  let option = {
    color: ['#00f2f1', '#ed3f35'],
    // title: {
    //     text: '折线图堆叠'
    // },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['预期销售额', '实际销售额'],
      textStyle: {
        color: '#4c9bfd',
      },
      left: '25%',
    },
    grid: {
      top: '20%',
      left: '2%',
      right: '3%',
      bottom: '3%',
      containLabel: true,
      borderColor: 'rgba(0, 240, 255, 0.3)',
      show: true,
    },
    // toolbox: {
    //     feature: {
    //         saveAsImage: {}
    //     }
    // },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ],
      axisTick: {
        // 刻度
        show: false,
      },
      axisLabel: {
        // 文字
        color: '#4c9bfd',
      },
      axisLine: {
        // xAxis轴-垂直线段
        lineStyle: {
          color: '#012f4a',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisTick: {
        // 刻度
        show: false,
      },
      axisLabel: {
        // 文字
        color: '#4c9bfd',
      },
      axisLine: {
        // y轴-垂直线段
        lineStyle: {
          color: '#012f4a',
        },
      },
      splitLine: {
        lineStyle: {
          color: '#012f4a',
        },
      },
    },
    series: [
      {
        name: '预期销售额',
        type: 'line',
        smooth: true,
        data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      },
      {
        name: '实际销售额',
        type: 'line',
        smooth: true,
        data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
      },
    ],
  };

  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  });

  let data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34],
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24],
    ],
  };
  $('.sales a').on('click', function () {
    // clearInterval(timer);
    nowIndex = $(this).index() - 1;
    $(this).addClass('active').siblings().removeClass('active');
    let k = $(this).attr('data-type');
    let dataK = data[k];
    option.series[0].data = dataK[0];
    option.series[1].data = dataK[1];
    myChart.setOption(option);
    // roll();
  });

  let nowIndex = 0;
  let timer;
  function roll() {
    timer = setInterval(function () {
      nowIndex++;
      if (nowIndex === $('.sales a').length) {
        nowIndex = 0;
      }
      $('.sales a').eq(nowIndex).click();
    }, 1000);
  }
  roll();

  //   $('.sales').hover(
  //     function () {
  //       clearInterval(timer);
  //     },
  //     function () {
  //       roll();
  //     }
  //   );
  $('.sales')
    .on('mouseenter', function () {
      clearInterval(timer);
    })
    .on('mouseleave', function () {
      roll();
    }); // 点击同步索引问题
})();
